<script setup lang="ts">
import { computed, reactive, ref } from "vue";
import { deepClone } from "./utils/conversion";
import HeaderBar from "./components/HeaderBar.vue";
import MyDialog from "./components/MyDialog.vue";
import response from "./assets/data/response.json";

type DataListItem = {
	id: number;
	title: string;
	icon: string;
	content: string;
	disabled: boolean;
};
type DataItem = {
	id: number;
	title: string;
	subtitle: string;
	fitTarget: string;
	list: DataListItem[];
};
const data = reactive<DataItem[]>([]);
const current = ref(1); // 当前选中数据
const currentInfo = computed(() => data.find((item) => item.id === current.value)); // 当前选中数据信息
const infoTitle = computed(() => currentInfo.value?.title ?? ""); // 当前选中数据标题
const infoFitTarget = computed(() => currentInfo.value?.fitTarget ?? ""); // 当前选中适合目标
const dialog = reactive({ show: false, title: "", content: "" });
init();
function init() {
	data.push(...deepClone(response));
}
// 切换当前选中数据
const changeCurrent = (id: number) => {
	current.value = id;
};
// 点击信息项
const infoItemClick = (item: DataListItem) => {
	dialog.title = currentInfo.value!.title + "-" + item.title;
	dialog.content = item.content;
	dialog.show = true;
};
</script>

<template>
	<HeaderBar title="VIP中心" />
	<div class="block"></div>
	<div v-if="!data.length" class="loading">加载中...</div>
	<template v-else>
		<div class="swiper">
			<div
				v-for="v in data"
				:key="v.title"
				:class="{ 'swiper-item': true, active: v.id === current }"
				@click="changeCurrent(v.id)"
			>
				<h1>{{ v.title }}</h1>
				<p>{{ v.subtitle }}</p>
			</div>
		</div>
		<section class="info">
			<hgroup>
				<h1>{{ infoTitle }}</h1>
				<h2>
					<span>（ 适合</span>
					<b>{{ infoFitTarget }}</b>
					<span> ）</span>
				</h2>
			</hgroup>
			<div class="container">
				<button
					v-for="v in currentInfo?.list ?? []"
					:key="v.id"
					:disabled="v.disabled"
					@click="infoItemClick(v)"
				>
					<div class="figure">
						<svg class="icon">
							<use :href="v.icon" />
						</svg>
					</div>
					<span>{{ v.title }}</span>
				</button>
			</div>
		</section>
	</template>
	<section>
		<hgroup>
			<h1>VIP区别</h1>
		</hgroup>
	</section>
	<MyDialog v-model:show="dialog.show">
		<div class="dialog-container">
			<div class="dialog-info" @click.stop>
				<h1>{{ dialog.title }}</h1>
				<p>{{ dialog.content }}</p>
			</div>
			<svg class="icon">
				<use href="#circle-xmark" />
			</svg>
		</div>
	</MyDialog>
</template>

<style scoped lang="scss">
.block {
	height: 0.44rem;
}
.loading {
	color: #999;
	line-height: 1rem;
	text-align: center;
	font-size: 0.14rem;
}
.swiper {
	margin-bottom: 0.1rem;
	padding: 0.12rem;
	display: flex;
	column-gap: 0.12rem;
	background-color: #fff;
	.swiper-item {
		flex: 1;
		height: 1.7rem;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border: 0.01rem solid #eee;
		background-color: #f6f6f6;
		transition: border-color 0.2s, background-color 0.2s;
		h1 {
			color: #333;
			font-size: 0.2rem;
			transition: color 0.2s;
		}
		p {
			color: #bbb;
			font-size: 0.14rem;
			transition: color 0.2s;
		}
		&.active {
			border-color: var(--primary-color);
			background-color: var(--lightest-secondary-color);
			h1 {
				color: var(--primary-color);
			}
			p {
				color: var(--secondary-color);
			}
		}
	}
}
section {
	margin-bottom: 0.1rem;
	padding: 0.24rem 0.2rem;
	background-color: #fff;
	display: flex;
	flex-direction: column;
	hgroup {
		margin-bottom: 0.3rem;
		display: flex;
		align-items: flex-end;
		h1 {
			color: #333;
			font-size: 0.18rem;
		}
		h2 {
			color: #aaa;
			font-size: 0.14rem;
			font-weight: normal;
			b {
				color: var(--primary-color);
				font-weight: normal;
			}
		}
	}
}
.info {
	.container {
		display: grid;
		grid-template-columns: repeat(5, 0.6rem);
		justify-content: space-between;
		button {
			padding: 0.1rem 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			background-color: #fff;
			.figure {
				margin-bottom: 0.1rem;
				width: 0.5rem;
				height: 0.5rem;
				border-radius: 50%;
				background-color: var(--lightest-primary-color);
				display: flex;
				justify-content: center;
				align-items: center;
				.icon {
					color: var(--primary-color);
					font-size: 0.24rem;
					transition: color 0.2s;
				}
			}
			span {
				font-size: 0.12rem;
				transition: color 0.2s;
			}
			&:disabled {
				.figure {
					.icon {
						color: var(--secondary-color);
					}
				}
				span {
					color: #ccc;
				}
			}
		}
	}
}
.dialog-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	.dialog-info {
		padding: 0.3rem;
		width: 2.4rem;
		height: 2.6rem;
		background-color: #f7f7f7;
		border-radius: 0.04rem;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		h1 {
			margin-bottom: 0.2rem;
			color: #333;
			font-size: 0.18rem;
		}
		p {
			flex: 1;
			color: #777;
			font-size: 0.14rem;
			overflow: auto;
		}
	}
	.icon {
		margin-top: 0.4rem;
		color: #ddd;
		font-size: 0.26rem;
	}
}
</style>
